<%@ page language="java" pageEncoding="UTF-8"%>
<script type="text/javascript">
var detailTree;
var templateId = $.windowLocationSearch()["id"];

function saveTemplateDetail() {
	block("#form-horizontal");
	var result = [];
	
	detailTree.jstree("get_checked").each(function(i,item) {
		var data = {"id":$(item).data("id"),"depth":$(item).data("depth")};
		result.push(data);
	});
	
	doSaveTemplateDetail($.toJSON(result));
}

function doSaveTemplateDetail(data) {

	var params = {
			templateId : templateId,
			data : data
		};
	
	$.ajax({
		type: "POST",
		url: ctx + "/biz/template/detail/save.json",
		data: params,
		success: saveSucceedTemplateDetailCallback,
		dataType:"json",
		error:function(message){
			unblock("#form-horizontal");
			$.alert(message);
		}
	});
}

function saveSucceedTemplateDetailCallback(data) {
	unblock("#form-horizontal");
	if (!data.succeed) {
		$.notice(data.message);
		return;
	}

	$(data.data).each(function() {
		var _this = this;
		detailTree.find("li").each(function() {
			if ($(this).data("id") == _this.id) {
				$(this).data("detailId",_this.detailId);
			}	
		});		
	});
 
	$.info("已保存");
}

function initDetailPanel(onlySelected) {
	block("#form-horizontal");
	detailTree = $.readonlyTree(
			"#detailTreeDiv",
			ctx + "/biz/template/detail/tree.json?templateId="+templateId,
			{
				is_selected : function(d) { //extended by cms
					if (d != null) {
						return d.data("detailId") != null && d.data("detailId") != "null";
					}
					return false;
				},
				two_state : false,
				"keep_selected_style" : false
			})
    .bind("loaded.jstree", function(e,data){ 
    	data.inst.open_all(-1); 
    })
    .bind("open_all.jstree", function(e,data){ 
    	data.inst.close_all(-1); 
    	detailTree.unbind("open_all.jstree").bind("open_all.jstree",function(e,data){ unblock("#form-horizontal"); });
		unblock("#form-horizontal"); 
	})
    .bind("close_all.jstree", function(e,data){ 
    	unblock("#form-horizontal"); 
	});
};

var isAllOpened = true;
function openAll(ele){
	block("#form-horizontal");
	if(isAllOpened){
		detailTree.jstree('open_all','-1');
		isAllOpened = false;
		$(ele).text("全部收缩");
	}else{
		detailTree.jstree('close_all','-1');
		isAllOpened = true;
		$(ele).text("全部展开");
	}
}

var isOnlySelected = false;
function onlySelected(ele){
	if(isOnlySelected){
		detailTree.find(".jstree-unchecked").show();//jstree-closed jstree-unchecked
		isOnlySelected = false;
		$(ele).text("只显示已选择项");
	}else{
		detailTree.find(".jstree-unchecked").hide();//jstree-closed jstree-unchecked
		isOnlySelected = true;
		$(ele).text("显示全部");
	}
}

</script>

<form id="form-horizontal" class="form-horizontal">
	<div class="control-group">
		<label class="control-label">指标项：</label>
		<div class="controls">
			<a href="#" class="btn" onclick="openAll(this)">全部展开</a>
			<a href="#" class="btn" onclick="onlySelected(this)">只显示已选择项</a>
			<div id="detailTreeDiv" class="well"></div>
		</div>
	</div>
	<div class="form-actions">
		<a href="#" class="btn btn-primary" onclick="saveTemplateDetail()"><i class="icon-ok"></i>保存</a>
	</div>
</form>